<template>
  <div class="listen">
    <div class="header">
      <HeaderTop></HeaderTop>
      <Transition>
        <div class="header_bottom" v-if="isHeaderShow">
          <div class="header_bottom_scroll">
            <HeaderScroll
              v-show="!isHeaderMenu"
              :data="topScroll"
              :index="1"
              @changeIndex="changeIndex"
              ref="refScroll"
            ></HeaderScroll>
            <div class="header_bottom_scroll_show" v-show="isHeaderMenu">请选择分类</div>
          </div>
          <div class="header_bottom_right" @click="changeMenu">
            <svg
              t="1692699053928"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11244"
              width="16"
              height="16"
              v-if="!isHeaderMenu"
            >
              <path
                d="M966.4 323.2c-9.6-9.6-25.6-9.6-35.2 0l-416 416-425.6-416c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l441.6 432c9.6 9.6 25.6 9.6 35.2 0l435.2-432C976 345.6 976 332.8 966.4 323.2z"
                p-id="11245"
                fill="#8a8a8a"
              ></path>
            </svg>
            <svg
              v-else
              t="1692699148861"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="12474"
              width="16"
              height="16"
            >
              <path
                d="M966.4 668.8l-435.2-432c-9.6-9.6-25.6-9.6-35.2 0l-441.6 432c-9.6 9.6-9.6 25.6 0 35.2 9.6 9.6 25.6 9.6 35.2 0l425.6-416 416 416c9.6 9.6 25.6 9.6 35.2 0S976 678.4 966.4 668.8z"
                p-id="12475"
                fill="#f86442"
              ></path>
            </svg>
          </div>
          <div class="header_bottom_class" v-show="isHeaderMenu">
            <div class="header_bottom_class_scroll clearfix">
              <div
                class="header_bottom_class_item"
                v-for="(item, index) in topScroll.arr"
                :key="index"
                @click="changeTopIndex(index , item.id)"
              >
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </Transition>
    </div>
    <div class="center">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <template #pulling="">
          <div></div>
        </template>
        <template #loosing>
          <div></div>
        </template>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <ListIndex v-for="(item) in pageArr" :key="item.id" :data="item"></ListIndex>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup lang="ts">
import HeaderTop from "@/components/headerTop/index";
import HeaderScroll from "@/components/headerScroll/index";
import ListIndex from "@/views/listen/listenItem/index";
import { ref, onMounted, watch } from "vue";
import { reqListenClass, reqListenArr } from "@/api/listen/index";

const isHeaderMenu = ref(false);
const isHeaderShow = ref(true);

const refScroll = ref()

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

// 页数控住
const page = ref(0);
const limit = ref(10);

// topScroll 所需数据
const topScroll = ref<any>({
  arr: [],
});

// topScroll 当前索引
const index = ref(1);

// 页面数据数组
const pageArr = ref<any>([]);

// 使用 defineOptions 函数来为组件命名
defineOptions({
  name: "Listen",
});

// 回调函数区域
const changeMenu = () => {
  isHeaderMenu.value = !isHeaderMenu.value;
};

// 滚动回调
const changeScroll = () => {
  // console.log(window.scrollY)
  // 如果滚动距离大于200 就隐藏tab栏
  if (window.scrollY >= 200) {
    isHeaderShow.value = false;
  } else if (window.scrollY < 200) {
    // 如果小于200 就显示
    isHeaderShow.value = true;
  }
};

//下拉刷新回调
const onRefresh = () => {
  refreshing.value = false;
};

// 触底加载事件
const onLoad = () => {
  // 修改page为下一页
  page.value += 1;
  
};

// 获取分类请求
const getClassInfo = async () => {
  const res: any = await reqListenClass();
  if (res.ret === 200) {
    topScroll.value.arr.push(
      ...res.data.categories.map((item:any) => {
        return {
          title: item.title,
          id: item.cid,
          name: item.name
        };
      })
    );
    // 修改页数为第一页
    page.value = 1
  }
};

// 获取分类展示数据
const getClassArr = async () => {
  const res: any = await reqListenArr(
    topScroll.value.arr[index.value].name,
    page.value,
    limit.value
  );
  if (res.ret === 200) {
    pageArr.value.push(...res.data.subjects);
    loading.value = false
  }
  console.log(res);
};

// 监听切换分类回调
const changeIndex = (changeIndex: number, id: number) => {
  // 修改当前title
  index.value = changeIndex;
  // 清空页面数据
  pageArr.value = [];
  // 初始化页数
  page.value = 1;
  // 从新获取数据
  getClassArr();
};

// 监听下拉分类回调
const changeTopIndex = (index:number , id:number) => {
  refScroll.value.changeIndex(index , id)
  isHeaderMenu.value = false
  // console.log(refScroll.value.changeIndex)
}

// 组合式api区域
onMounted(() => {
  window.addEventListener("scroll", changeScroll);
  getClassInfo();
  console.log(refScroll.value.changeIndex)
});

// 侦听器 侦听页数改变从新获取数据
watch(page, () => {
  getClassArr()
});
</script>

<style scoped lang="less">
.v-enter-from {
  opacity: 0;
  // transform: ;
  height: 0;
}
.v-enter-to {
  opacity: 1;
  height: auto;
}
.v-leave-from {
  height: auto;
  opacity: 1;
}
.v-leave-to {
  height: 0;
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease;
}
.listen {
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  .header {
    position: fixed;
    width: 100vw;
    z-index: 999;
    background-color: #fff;
    top: 0;
    .header_bottom {
      position: relative;
      display: flex;

      .header_bottom_scroll {
        flex: 8;
        .header_bottom_scroll_show {
          padding: 0px 15px;
          height: 35px;
          line-height: 35px;
          box-sizing: border-box;
          font-size: 14px;
          color: #ccc;
          border-bottom: 1px solid #eee;
        }
      }
      .header_bottom_right {
        margin-top: 5px;
        text-align: center;
        border-bottom: 1px solid #eee;
        border-left: 1px solid #eee;
        flex: 1;
      }

      .header_bottom_class {
        background-color: #fff;
        position: absolute;
        z-index: 9999;
        top: 35px;
        // box-sizing: border-box;
        padding-right: 10px;
        height: 345px;
        width: 100vw;
        border-bottom: 1px solid #eee;
        overflow: scroll;
        .header_bottom_class_scroll {
          padding: 15px;
          .header_bottom_class_item {
            margin-bottom: 15px;
            background-color: #f3f4f5;
            text-align: center;
            margin-right: 5%;
            border-radius: 5px;
            width: 30%;
            height: 32px;
            line-height: 32px;
            float: left;
            font-size: 16px;
            color: #333;
          }
          & :nth-child(3n).header_bottom_class_item {
            margin-right: 0;
          }
        }
      }
    }
  }

  .center {
    margin-top: 85px;
  }
}
</style>
